<template>
    <div class="pane-con">
        <xdh-layout fixed :north="{height: 'auto'}" >
             <xdh-filter-panel title="查询条件" :model.sync="model" @on-query="handleQuery" slot="north" >
            <el-form-item label="现持证件号码" prop="passno">
                <el-input v-model="model.passno" placeholder="请填写证件号码"></el-input>
            </el-form-item>
                <el-form-item label="国籍" prop="gj" v-if="type === 'foreigner'">
              <el-select v-model="model.gj" :value-key="'code'" filterable placeholder="请选择国籍"
               clearable>
                <el-option
                v-for="(item, idx) in gjList" :key="idx"
                :label="item.label"
                :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
              <el-form-item label="性别" prop="sex" v-if="type === 'foreigner'">
               <el-select v-model="model.sex" clearable>
                  <el-option
                  label="全部" value="">
                  </el-option>
                  <el-option
                  label="男" value="1">
                  </el-option>
                  <el-option
                  label="女" value="2">
                  </el-option>
               </el-select>
            </el-form-item>
             <el-form-item label="出生日期" prop="csrq" v-if="type === 'foreigner'">
                 <el-date-picker
               style="width:140px;"
                     size="mini"
                      v-model="model.startBirthday"
                      placeholder="开始日期"
                      :value-format="'yyyy-MM-dd'"
                      :default-value="defaultBirthday">
                    </el-date-picker>
                    &nbsp;&nbsp;至&nbsp;&nbsp;
                      <el-date-picker
                          style="width:140px;"
                     size="mini"
                      v-model="model.endBirthday"
                      :value-format="'yyyy-MM-dd'"
                      placeholder="结束日期"
                      :default-value="defaultBirthday">
                    </el-date-picker>
            </el-form-item>
              <el-form-item label="签证办理时间" prop="timeRange" v-if="type === 'foreigner'">
                <el-date-picker
               style="width:140px;"
                     size="mini"
                      :value-format="'yyyy-MM-dd'"
                      v-model="model.startDate"
                      placeholder="开始日期"
                      :default-value="defaultSignday">
                    </el-date-picker>
                    &nbsp;&nbsp;至&nbsp;&nbsp;
                      <el-date-picker
                          style="width:140px;"
                     size="mini"
                      :value-format="'yyyy-MM-dd'"
                      v-model="model.endDate"
                      placeholder="结束日期"
                      :default-value="defaultSignday">
                    </el-date-picker>
            </el-form-item>
            <el-form-item label="反馈状态" prop="state" v-if="type === 'task'">
                <el-select v-model="model.state" filterable placeholder="请选择反馈状态">
                    <el-option
                    v-for="item in stateList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            </xdh-filter-panel>
            <xdh-list-panel :load="loadData" :state="state" fit ref="listPanel"
            :sizes="pageSizes" :size="20">
                <template slot-scope="scope">
                    <el-table :data="state.list" border stripe 
                    :height="scope.height" 
                    >
                            <el-table-column type="index" :label="'序号'" :index="calcIndex" :width="50">

                    </el-table-column>
                       <el-table-column label="国家地区" prop="ccountry">
                    </el-table-column>
                    <el-table-column label="英文姓名" prop="enname" show-overflow-tooltip :min-width="150"></el-table-column>
                    <el-table-column label="性别" prop="csex" :min-width="60"></el-table-column>
                    <el-table-column label="出生日期" prop="birthday" :min-width="100">
                       <template slot-scope="scope">
                         {{scope.row.birthday | dateFormat}}
                      </template>
                    </el-table-column>
                    <el-table-column label="现持证件号码" prop="passno" :min-width="90"></el-table-column>
                    <el-table-column label="所持证件有效期至" prop="signvali" :min-width="100">
                        <template slot-scope="scope">
                         {{scope.row.signvali | dateFormat}}
                      </template>
                    </el-table-column>
                    <el-table-column label="签证/居留许可号码" prop="signno" :min-width="90"></el-table-column>
                    <el-table-column label="签发日期" prop="signdate" :min-width="100">
                          <template slot-scope="scope">
                         {{scope.row.signdate | dateFormat}}
                      </template>
                    </el-table-column>
                    <el-table-column label="境内居住地行政区划" prop="caddrareacode" show-overflow-tooltip :min-width="150"></el-table-column>
                    <el-table-column label="境内居住地派出所" prop="caddrpolicecode" show-overflow-tooltip :min-width="150"></el-table-column>
                    <el-table-column 
                       label="操作" :width="type === 'task' ? 180: 100" fixed="right">
                           <template slot-scope="scope">
                              <el-button @click="view(scope.row)" type="default" size="mini">
                                  <i class="iconfont icon-visible"></i>
                                  查看</el-button>
                              <el-button type="primary" size="mini" @click="feedback(scope.row)"
                              v-if="type === 'task' && scope.row.state === 1">
                                        <i class="iconfont icon-share"></i>
                                  反馈</el-button>
                            </template>
                    </el-table-column>
                    </el-table>
                </template>
            </xdh-list-panel>
        </xdh-layout>
        <person-detail :visible="personDialog" :show-feedback="personShowFeedback" :row-data="personData" @close="personDialog = false"></person-detail>
        <feedback-detail :visible="feedbackDialog" :row-data="personData"
         @close="feedbackDialog = false" :mode="'submit'"></feedback-detail>
    </div>
</template>
<script>
import XdhFilterPanel from '@/widgets/xdh-filter-panel';
import XdhListPanel from '@/widgets/xdh-list-panel';
import XdhLayout from '@/widgets/xdh-layout';
import PersonDetail from '@/components/common/personDetail';
import feedbackDetail from '@/components/common/feedbackDetail';
import checktasksMixin from '@/base/mixin/checktasks';
import fvisasMixin from '@/base/mixin/fvisas';
import countryMixin from '@/base/mixin/fcountrys';
import date from '@/utils/date';
export default {
  mixins: [countryMixin, checktasksMixin, fvisasMixin],
  components: {
    XdhFilterPanel,
    XdhListPanel,
    XdhLayout,
    PersonDetail,
    feedbackDetail
  },
  props: {
    type: {
      type: String,
      default: 'send'
    }
  },
  data() {
    return {
      showSendAll: true,
      personDialog: false,
      feedbackDialog: false,
      personData: null,
      personShowFeedback: true,
      pageSizes: [20, 50, 100, 500],
      stateList: [{ label: '未反馈', value: 1 }, { label: '已反馈', value: 2 }],
      defaultBirthday: new Date(2000, 0, 1),
      defaultSignday: new Date(),
      gjList: [],
      state: {
        total: 0,
        list: []
      },
      model: {
        passno: '',
        state: 1
      },
      pageInfo: {
        page: 1,
        limit: 20
      }
    };
  },
  filters: {
    dateFormat(val) {
      if (!val) {
        return '-';
      }
      let y = val.slice(0, 4);
      let m = parseInt(val.slice(4, 6)) - 1;
      let d = val.slice(6, 8);
      return date(new Date(y, m, d), 'yyyy-MM-dd');
    }
  },
  watch: {
    type(val) {
      if (val === 'task') {
        this.model = {
          passno: '',
          state: 1
        };
      } else if (val === 'foreigner') {
        this.model = {
          passno: '',
          jn: [],
          gzd: [],
          startDate: '',
          endDate: '',
          startBirthday: '',
          endBirthday: '',
          sex: '',
          country: ''
        };
      }
      this.$refs.listPanel.reload();
    }
  },
  methods: {
    calcIndex(index) {
      return index + (this.pageInfo.page - 1) * this.pageInfo.limit + 1;
    },
    view(row) {
      this.personDialog = true;
      this.personData = row;
      if (this.type === 'task') {
        this.personShowFeedback = true;
      } else {
        this.personShowFeedback = false;
      }
    },
    feedback(row) {
      this.feedbackDialog = true;
      this.personData = row;
    },
    loadData(page, limit) {
      let query = Object.assign({}, this.model, {
        page: page,
        limit: limit
      });
      if (this.type === 'task') {
        if (query.gj) {
          query.country = query.gj.code;
        }
        delete query.jn;
        delete query.gzd;
        delete query.gj;
      }
      for (var i in query) {
        if (!query[i] && query[i] !== 0) {
          delete query[i];
        }
      }
      if (this.type === 'task') {
        return this.fetchChecktasks(query).then(res => {
          let list = [];
          res.list.forEach(r => {
            let obj = { ...r.fvisatbl };
            delete r.fvisatbl;
            obj = Object.assign({}, obj, r);
            list.push(obj);
          });
          res.list = list;
          this.state = res;
        });
      } else if (this.type === 'foreigner') {
        return this.fetchFvisas(query).then(res => {
          this.state = res;
        });
      }
    },
    handleQuery(query) {
      this.$refs.listPanel.reload();
    }
  },
  created() {
    this.getCountryList({}).then(res => {
      this.gjList = res;
    });
  }
};
</script>
<style  type="text/scss" lang="scss" scoped>
.pane-con {
  height: calc(100% - 30px);
  .submit-btns {
    height: 50px;
    text-align: center;
    padding: 15px;
  }
}
</style>